* {
        box-sizing: border-box;
        margin: 0px;
        padding: 0
    }

    body {
        font-family: '微软雅黑';
    }

    [v-cloak] {
        display: none
    }

    #app {
        height: 100vh
    }

    .display {
        background: #222;
        color: #fff;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;

    }

    .pc .display {
        height: 20vh
    }

    .mobile .display {
        height: calc(100vh - 125vw)
    }

    .display .result {
        font-size: 80px;
        font-weight: 100;
        line-height: 80px;
        padding: 0 6px;
    }
    .display .result.sm{
        font-size: 40px;
    }

    .panel {
        color: #333;
        display: flex;
        flex-wrap: wrap;
    }

    .pc .panel {
        height: 80vh
    }

    .panel .k {
        border-bottom: solid 1px rgba(0, 0, 0, .3);
        border-right: solid 1px rgba(0, 0, 0, .3)
    }

    .pc .panel .k {
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile .panel .k {
        width: 25vw;
        padding-bottom: calc(25vw - 1px);
        position: relative;
    }

    .panel .k:nth-child(4n) {
        border-right: none;
        background-color: #f5923e;
        color: #fff;
    }

    .panel .k:last-child {
        border-right: none;
        background-color: #f5923e;
        color: #fff;
    }

    .panel .k.h {
        background: #eee
    }

    .panel .k.zero {
        width: 50vw
    }

    .panel .k span {

        font-size: 10vmin;
        font-weight: 100
    }

    .mobile .panel .k span {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }